<template>
  <Header :showLogo="showLogo"></Header>

  <div>
    <div class="loginContainer">
      <div>
        <img src="@/static/images/网易.png" alt="" class="loginImg" />
      </div>
      <van-button class="btn1" size="normal" type="danger" @click="$router.push({path:'/loginCenter',query:{redirect:params}})"
        ><van-icon name="user-o" size="20px" />账号密码登录
      </van-button>
      <van-button class="btn2"><van-icon size="20px" name="envelop-o" /> 邮箱账号登陆</van-button>

      <div class="iconWrap">
        <div class="iconItem"><van-icon class="icon" size="20px" name="wechat" />微信</div>
        |
        <div class="iconItem"><van-icon class="icon" size="20px" name="qq" />QQ</div>
        |
        <div class="iconItem"><van-icon class="icon" size="20px" name="weibo" />微博</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { onMounted } from 'vue';
import { ref } from 'vue';
import { defineComponent } from 'vue'
import { useRoute } from 'vue-router';
export default defineComponent({
  name: '',
})
</script>
<script lang="ts" setup>
const route = useRoute()
const params = ref()
const showLogo = ref(false)
onMounted(()=>{
  if(route.query.redirect){
    params.value = route.query.redirect
  }
})
</script>

<style lang="less" scoped>
body {
  height: 100%;
  .loginContainer { 
    // background-color: aqua;
    font-family: '楷体';
    padding-top: 44px;
    width: 100%;
    background-color: #f2f5f4;
    text-align: center;
    padding-top: 80px;
    display: flex;
    flex-direction: column;
    // justify-content: center;
    height: calc(100vh - 44px);
    margin: 0 auto;
    .loginImg {
      width: 134px;
      height: 45px;
    }
    .btn1 {
      width: 90%;
      margin-left: 20px;
      margin-top: 50px;
      margin-bottom: 20px;
      height: 47px;
      background-color: #dd1a21;
    }

    .btn2 {
      width: 90%;
      margin-left: 20px;
      border-color: #dd1a21;
      color: #dd1a21;
      height: 47px;
    }

    .iconWrap {
      width: 100%;
      height: 22px;
      // background-color: aqua;
      display: flex;
      font-size: 15px;
      color: #7f7f7f;
      position: absolute;
      bottom: 80px;
      justify-content: center;
      .iconItem {
        margin: 0 10px;
        .icon {
          margin-right: 3px;
        }
      }
    }
  }
}
</style>
